<template>
	<view>
		<uamhead :title="title"></uamhead>
		<view class="song">{{song.artist}}:{{song.name}}</view>
		<view class="player">
			<image :src="song.picUrl" mode=""></image>
			<image :src="song.picUrl" :class="{ 'run' : isplayrotate }" mode=""></image>
			<text class="iconfont iconpause " v-if="isplayrotate" @tap="noplaying"></text>
			<text class="iconfont iconbofang " v-else="" @tap="playing"></text>
			<view></view>
		</view>
		<scroll-view class="lyric" scroll-y="true">
			<view class="wrap" :style="{transform : 'translateY('+ - (lyricIndex -1)*82+'rpx)'}">
				<view class="item" :class="{active : lyricIndex ==index}" v-for="(item,index) in song.lyric"
					:key="index">
					{{item.lyric}}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import uamhead from '../../components/uamhead/uamhead.vue'
	import {
		songDetail,
		songLyric,
		songUrl
	} from '../../common/api.js';
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				title: "黑胶唱片",
				song: {
					id: '',
					name: '',
					artist: '',
					picUrl: '',
					songUrl: '',
					lyric: ''
				},
				isplayrotate: false,
				lyricIndex: 0
			}
		},
		onLoad(options) {
			let sId = options.playerid; // options.songId33894312
			songDetail(sId).then(res => {
				let s = res.data.songs[0]
				this.song.name = s.name
				this.song.id = s.id
				this.song.artist = s.ar[0].name
				this.song.picUrl = s.al.picUrl
				songUrl(this.song.id).then(res => {
					this.song.songUrl = res.data.data[0].url;
				})
				songLyric(sId).then(res => {
					// this.song.lyric = res.data.lrc.lyric
					let lyric = res.data.lrc.lyric;
					let result = [];
					let re = /\[([^\]]+)\]([^[]+)/g;
					lyric.replace(re, ($0, $1, $2) => {
						result.push({
							time: this.formatTimeToSec($1),
							lyric: $2
						});
					});
					this.song.lyric = result;
				})
			})
		},
		methods: {
			playing() {
				innerAudioContext.src = this.song.songUrl;
				if (innerAudioContext.paused == true) {
					innerAudioContext.play()
					this.isplayrotate = true,
					// this.listenLyricIndex();
					console.log("开始播放")
				}
			},
			noplaying() {
				innerAudioContext.pause()
				this.isplayrotate = false;
				this.listenLyricIndex();
				console.log("停止播放")
				innerAudioContext.onPause(() => { //暂停时调用的方法  
					innerAudioContext.startTime = innerAudioContext.currentTime
					//startTime  设置开始时间  currentTime 暂停时的秒数   官方文档都有写
				});
				this.innerAudioContext = innerAudioContext;
			},
			formatTimeToSec(time) {
				var arr = time.split(':');
				return (parseFloat(arr[0]) * 60 + parseFloat(arr[1])).toFixed(2);
			},
			listenLyricIndex() {
				clearInterval(this.timer);
				this.timer = setInterval(() => {
					for (var i = 0; i < this.song.lyric.length; i++) {
						if (this.song.lyric[this.song.lyric.length - 1].time < this.innerAudioContext
							.currentTime) {
							this.lyricIndex = this.song.lyric.length - 1;
							break;
						}
						if (this.song.lyric[i].time < this.innerAudioContext.currentTime && this.song.lyric[i + 1]
							.time > this.innerAudioContext.currentTime) {
							this.lyricIndex = i;
						}
					}
				});
			}
		}
	}
</script>

<style>
	.player {
		width: 580rpx;
		height: 580rpx;
		background: url(~@/static/disc.png);
		background-size: cover;
		margin: 210rpx auto 44rpx auto;
		position: relative;
		z-index: 2;
	}

	.player image {
		width: 380rpx;
		height: 380rpx;
		border-radius: 50%;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 3;
	}

	.player text {
		width: 100rpx;
		height: 100rpx;
		font-size: 100rpx;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		color: white;
		z-index: 4;
	}

	.player view {
		position: absolute;
		width: 170rpx;
		height: 266rpx;
		position: absolute;
		left: 60rpx;
		right: 0;
		margin: auto;
		top: -170rpx;
		background: url(~@/static/needle.png);
		background-size: cover;
	}

	.player image {
		width: 380rpx;
		height: 380rpx;
		border-radius: 50%;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 3;
		animation: 10s linear infinite move;
		animation-play-state: paused;
	}

	@keyframes move {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.player .run {
		animation-play-state: running;
	}

	.lyric {
		height: 245rpx;
		line-height: 82rpx;
		font-size: 32rpx;
		text-align: center;
		color: #949495;
		overflow: hidden;
	}

	.active {
		color: blue;
	}

	.lyric .wrap {
		transition: .5s;
	}

	.lyric .item {
		flex-shrink: 0;
		height: 90rpx;
	}

	.song {
		margin: 20px;
	}
</style>
